<template>
  <div class="process">
    <img src="../../assets/images/process2.png" alt="" />
  </div>
  <div class="title">
    <img src="../../assets/images/blueRight.png" alt="">
    资料已提交
  </div>
  <div class="date">
    请你联系公司财务尽快完成小额汇款，否则将直接影响订单审核进度。汇款有效期为
    <span style="font-size: 28px">30天</span>。
<!--    <div v-if="remainingTime" class="countdown">-->
<!--      剩余时间:{{remainingTime}}-->
<!--    </div>-->
  </div>
  <div class="container">
    <div class="right">
      <div class="item">
        <span class="label" style="line-height: 50px">打款金额</span>
        <div>
          <div class="amount">￥{{ payInfo.amount }}</div>
          <p class="tip">请按照指定金额汇款以做验证</p>
        </div>
      </div>
      <div class="item" style="margin-top: 28px;">
        <span class="label">收款账号</span>
        <div class="account">
          {{ payInfo.account }}
          <a type="primary" size="small" style="margin-left: 35px" @click="copyAccount"> 复制25位账号 </a>
        </div>
      </div>
      <p class="account-tip">每笔认证单对应不同的25位收款账号，请勿重复打款</p>
      <div class="item" style="margin-top: 28px;">
        <span class="label">收款公司名</span>
        <span class="text">青岛诺展网络科技有限公司</span>
      </div>

      <div class="item">
        <span class="label">开户银行</span>
        <span class="text">{{ payInfo.bank }}</span>
      </div>

      <div class="item">
        <span class="label">备注信息</span>
        <span class="text">金诺企业认证</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { computed, onMounted, ref } from "vue";
import baseService from "@/service/baseService";
import { useRouter } from "vue-router";
import tabBus from "@/utils/tabBus";

const router = useRouter();
const payInfo = ref({
  bank: "",
  amount: "",
  account: ""
});

const remainingTime = ref('');

onMounted(async () => {
  // 获取打款信息并显示
  try {
    const { data } = await baseService.get('/noc/authcompanyaudit/getPayInfo');
    payInfo.value.bank = data.bank;
    payInfo.value.amount = data.amount;
    payInfo.value.account = data.account;

    // 优先使用后端返回的创建时间，如果没有则不显示倒计时
    let createAt = null;
    if (data.createdAt) {
      createAt = new Date(data.createdAt);
    } else if (data.createAt) {
      createAt = new Date(data.createAt);
    }

    if (createAt) {
      const expireAt = new Date(createAt.getTime() + 30 * 24 * 60 * 60 * 1000);
      updateCountdown(expireAt);
    } else {
      // 如果没有创建时间，显示提示信息
      remainingTime.value = '无法获取创建时间';
    }
  } catch (error) {
    console.error('获取打款信息失败', error);
    ElMessage.error('获取打款信息失败');
  }
})


// 倒计时计算
function updateCountdown(expireAt) {
  const update = () => {
    const now = new Date();
    const diff = expireAt - now;

    if (diff <= 0) {
      remainingTime.value = '已过期';
      return;
    }

    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));

    remainingTime.value = `${days}天 ${hours}小时 ${minutes}分钟`;
  };

  update();
  setInterval(update, 60000); // 每分钟更新一次
}
// 复制用
const ACCOUNT = computed(() => payInfo.value.account)
async function copyAccount() {
  const text = payInfo.value.account
  try {
    await navigator.clipboard.writeText(text)
    ElMessage.success('已复制')
  } catch {
    const input = document.createElement('input')
    input.value = text
    document.body.appendChild(input)
    input.select()
    document.execCommand('copy')
    document.body.removeChild(input)
    ElMessage.success('已复制')
  }
}
</script>

<style scoped lang="scss">
.container {
  margin-top: 30px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
  padding: 30px;
}

.process {
  text-align: center;
}

.right {
  width: 1110px;
  margin: 0 auto;
  background: rgba(240, 245, 255, 1);
  border-radius: 20px;
  padding: 22px 32px 22px 140px;
  line-height: 1.6;
}

.item {
  display: flex;
  margin-bottom: 25px;
  align-items: flex-start;

  .label {
    font-size: 16px;
    width: 120px;
    font-weight: 500;
    color: #333;
    margin-right: 16px;
    flex-shrink: 0;
  }

  .text {
    font-size: 24px;
    margin-top: -7px;
  }

  .amount {
    font-size: 36px;
    font-weight: 600;
    color: rgba(255, 46, 46, 1);
    margin-top: -2px;
  }

  .tip {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    // line-height: 26px;
    color: rgba(128, 128, 128, 1);
    text-align: left;
    vertical-align: top;
    margin: 0px;
  }

  .account {
    margin-top: -16px;
    display: flex;
    align-items: center;
    font-size: 36px;
    font-weight: 500;
  }

  .account a {
    color: rgba(22, 119, 255, 1);
    font-size: 16px;
  }
}

.title {
  font-size: 35px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 50.68px;
  color: rgba(56, 56, 56, 1);
  text-align: center;
  vertical-align: top;
  margin-top: 30px;

  img {
    margin-top: -7px;
    width: 37.5px;
    height: 37.5px;
    vertical-align: middle;
  }
}

.date {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 40.54px;
  color: rgba(56, 56, 56, 1);
  text-align: center;
  margin-top: 20px;
}

.account-tip {
  margin-top: -24px;
  margin-left: 140px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  // line-height: 26px;
  color: rgba(128, 128, 128, 1);
  text-align: left;
  vertical-align: top;
  // margin: 0px;
}
</style>
